<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../styles/clover_validator.css"/>
    <script src="../lib/jquery-1.7.min.js"></script>
    <script src="../clover_validator_3.0.js"></script>
    <script src="../clover_validator_3.0.autoload.js"></script>
    <script>
        $(function () {
            var validator = new Clover.validator.Validator("#testForm");
            validator.addValidation("[name='firstName']", "integer", "得是数字");
            validator.addValidation("[name='firstName']", "length>1");
            validator.addValidation("[name='firstName']", "value>100", "要大于100");
            validator.addConditionalValidation("[name='firstName']", "required", function () {
                var r = $("[name='birthday']").val().length > 0;
                return r;
            }, "sdfsdf");

            validator.addValidation("[name='birthday']", "date");
            validator.addValidation("[name='birthday']", "dateOrder>2012-02-07");

            validator.addValidation("[name='favor']", "select");
        });
    </script>
</head>
<body>
<form id="testForm" action="#">
    <p>
        <label>FirstName: <input type="text" name="firstName" /></label>
    </p>
    <p>
        <label>Birthday: <input type="text" name="birthday" /></label>
        <input id="com" name="com" />
    </p>
    <p>
        Favor: <input type="checkbox" name="favor" value="computer" />Computer <input type="checkbox" name="favor" value="anime" />Anime <input type="checkbox" name="favor" value="comic" />Comic
    </p>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

<h3>自动扫描加载验证示例</h3>
<form id="autoForm" action="#" class="validation-required">
    <p>
        <label>FirstName: <input type="text" name="firstName" data-validation="*!Chinese[1,2]" /></label>
    </p>
    <p>
        <label>Birthday: <input type="text" name="birthday" /></label>
        <input id="net" name="com" />
    </p>
    <p>
        Favor: <input type="checkbox" name="favor" value="computer" data-validation="select" />Computer <input type="checkbox" name="favor" value="anime" />Anime <input type="checkbox" name="favor" value="comic" />Comic
    </p>
    <p style="margin-bottom: 1000px;">
        <select name="ss" data-validation="required">
            <option value="">请选择</option>
            <option value="1">1</option>
        </select>
    </p>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>
</body>
</html>